<template>
  <div style="width: 1200px;margin: 0px auto;position: relative">
    <div class="menu_nav_now">
      <div style="height: 280px;width: 220px;text-align: center">
        <el-tooltip class="item" effect="dark" content="点击更换头像" placement="bottom">
          <div  @click="showImage" class="tou" >
            <el-avatar :size="120" fit="fill" :src="user.imageUrl" ></el-avatar>
          </div>
        </el-tooltip>
        <div>
          <p style="font-weight: bolder">{{user.nickname}}</p>
        </div>
        <div class="showIcon">
          <span><i class="el-icon-message" v-bind:class="{iconRed:this.user.email === null ? false : true}"></i> </span>
          <span><i class="el-icon-mobile-phone" v-bind:class="{iconRed:this.user.phone === null ? false : true}"></i> </span>
        </div>
      </div>
      <div style="font-weight: bolder;text-align: left;padding-left: 10%">账号管理</div>
      <el-divider></el-divider>
      <el-menu
        :default-active="activeIndex"
        class="UserNavMenu"
        router
        mode="vertical"
      >
        <el-menu-item v-for="item in menuList" :key="item.menu_id" :index="item.url" class="item_div" >
          <span class="itemText">
              {{item.name}}
          </span>
          <span class="afterIcon">
            <i class="el-icon-arrow-right"></i>
          </span>
        </el-menu-item>
      </el-menu>
    </div>
    <el-dialog
      title="修改头像"
      :visible.sync="dialogFormVisible"
      :center="false"
    >
      <el-form >
        <el-avatar :size="180" fit="fill" class="tou" :src="linImage" ></el-avatar>
        <el-form-item>
          <el-upload
            class="upload_div"
            :auto-upload="true"
            action=""
            :show-file-list="false"
            :http-request="fileUpload"
            :multiple="false">
            <el-button size="small" type="primary" style="margin-top: 20px">
              <span>点击上传</span>
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="uploadImage">确 定</el-button>
      </div>
    </el-dialog>
    <router-view class="show_div"></router-view>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'UserCenter',
  data () {
    return {
      activeIndex: '',
      dialogFormVisible: false,
      linImage: '',
      message_isActive: false,
      phone_isActive: false,
      menuList: [
        {
          menu_id: 1,
          name: '账号绑定',
          url: '/userHome/userCenter/userBinding'
        },
        {
          menu_id: 2,
          name: '个人信息',
          url: '/userHome/userCenter/userInfo'
        },
        {
          menu_id: 3,
          name: '操作记录',
          url: '/userHome/userCenter/recordShow'
        },
        {
          menu_id: 4,
          name: '教师认证',
          url: '/userHome/userCenter/teacherApprove'
        }
      ]
    }
  },
  computed: mapState({
    user: 'user'
  }),
  mounted () {
    // 获取地址栏中的路由，设置elementui中的导航栏选中状态
    this.activeIndex = window.location.pathname
  },
  methods: {
    showImage () {
      this.dialogFormVisible = true
      this.linImage = this.user.imageUrl
    },
    async fileUpload (file) {
      var _this = this
      var host = this.$store.state.ossData.host
      var response = this.$Utils.getSignature('image')
      var requestData = new FormData()
      await response.then(res => {
        requestData = this.$Utils.fileUpload(file.file, res)
      })
      await this.$axios.post(host, requestData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          let complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
          file.onProgress({percent: complete})
        }
      })
        .then(function (response) {
          // eslint-disable-next-line eqeqeq
          if (response.status == 200) {
            _this.linImage = host + '/' + requestData.get('key')
          }
        })
    },
    uploadImage () {
      var _this = this
      var user = {}
      user.userId = this.user.userId
      user.imageUrl = _this.linImage
      // eslint-disable-next-line eqeqeq
      if (this.linImage != this.user.imageUrl) {
        this.$axios.post('/api/user/update',
          this.$qs.stringify({
            userData: JSON.stringify(user)
          })
        )
          .then(function (response) {
            var result = response.data
            if (result.isSuccess) {
              var user = JSON.parse(JSON.stringify(result.result))
              _this.$store.commit('setImage', user.imageUrl)
              _this.dialogFormVisible = false
              _this.$message({
                message: '头像修改成功！',
                type: 'success'
              })
            } else {
              _this.$message({
                message: '修改失败！',
                type: 'errot'
              })
            }
          })
      }
    }
  }
}
</script>

<style>
  .menu_nav_now .el-divider {
    width: 80%;
    margin: 12px 10%;
  }
  .iconRed {
    color: red;
  }
  .menu_nav_now .el-menu-item.is-active {
    color: #FFF;
    background-color: red;
  }
  .menu_nav_now .el-menu-item.is-active:hover{
    color: #FFF;
    background-color: red;
  }
  .showIcon {
    margin: 5px 0px;
    text-align: center;
  }
  .showIcon span{
    margin: 0px 10px;
    border: 4px solid #FFF;
    border-radius: 50%;
  }
  .menu_nav_now{
    position: absolute;
    left: 24px;
    width: 220px;
    background-color:#f8fafc ;
  }
  .show_div {
    margin-left: 288px;
    min-height: 589px;
  }
  .UserNavMenu{
    background-color:#f8fafc ;
    border-right: 0px;
  }
  .item_div{
    text-align: left;
  }
  .itemText{
    padding-left: 20px;
  }
  .item_div:hover{
    color: red;
    background-color: #FDF9F9;
  }
  .afterIcon{
    position: absolute;
    right: 10px;
  }
  .tou{
    margin-top: 20px;
    display: inline-block;
    border: 4px solid rgba(190, 190, 190, 0.36);
    border-radius: 50%;
  }
  .tou:hover {
    cursor: pointer;
  }
  .el-dialog__header {
    text-align: left;
  }
</style>
